import { useDispatch } from "react-redux";
import {
  getComponentConfByType,
  type ComponentPropsType,
} from "../../../components/QuestionComponents";
import useGetComponentInfo from "../../../hooks/useGetComponentInfo";
import { changeComponentProps } from "../../../store/componentsReducer";
const NoProp = () => <div style={{ textAlign: "center" }}>未选中组件</div>;
export default function ComponentProp() {
  const { selectedComponent } = useGetComponentInfo();
  const dispatch = useDispatch();
  if (selectedComponent) {
    const { type, props } = selectedComponent;
    const componentConf = getComponentConfByType(type);
    if (componentConf) {
      const { PropComponent } = componentConf;
      function changeProps(newProps: ComponentPropsType) {
        console.log(newProps);
        if (selectedComponent) {
          const { fe_id } = selectedComponent;
          dispatch(changeComponentProps({ fe_id, newProps }));
        }
      }
      return <PropComponent {...props} onChange={changeProps} />;
    } else {
      return <NoProp />;
    }
  } else {
    return <NoProp />;
  }
  return "属性";
}
